<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:text="${'实用在线工具-'+title}">实用在线工具</title>
    <link rel="icon" href="/favicon.svg" type="image/x-icon">
    <link rel="stylesheet" th:href="${public_cdn + '/layui/2.6.8/css/layui.min.css'}">
    <style>
        #editor {
            width: 100%;
            height: 92vh;
            border: 1px solid #ebebeb;
        }
    </style>
</head>
<body>
<div style="margin: 10px">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" id="format">格式化XML</button>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="compress">压缩XML</button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" id="clear">清空输入</button>
    </div>
    <div id="editor"></div>
</div>

<script th:src="${public_cdn + '/jquery/2.2.4/jquery.min.js'}" type="text/javascript"></script>
<script th:src="${public_cdn + '/layui/2.6.8/layui.min.js'}"></script>
<script th:src="${public_cdn + '/ace/1.4.12/ace.min.js'}"></script>
<script src="/static/tool/xml/jquery.format.js"></script>
<script th:inline="javascript">
    ace.config.set('basePath', [[${public_cdn + '/ace/1.4.12'}]]);

    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/sqlserver");
    editor.session.setMode("ace/mode/xml");
    editor.setFontSize("14px");
    editor.setOption("wrap", "free");

    layui.use([], function () {

        $("#format").click(function () {
            editor.setValue($.format(editor.getValue(), {method: 'xml'}));
        });

        $("#compress").click(function () {
            editor.setValue($.format(editor.getValue(), {method: 'xmlmin'}));
        });

        $("#clear").click(function () {
            editor.setValue("");
        });
    });
</script>
</body>
</html>
